import React, { useRef } from 'react';
import  QrCode  from 'qrcode';
import html2canvas from 'html2canvas'
import JsZip from 'jszip'
import { saveAs } from 'file-saver'

function GenerateQR(){
  //二维码生成
  let divRef = useRef('')
  let qrImg = useRef('')
  let generQr = ()=>{
    QrCode.toDataURL('http://localhost:3000/books',{
      width:200,
      height:200,
      margin:5,
      color:{
        dark:"#f00",
        light:"#0f0",
      }
    }).then(res =>{
      qrImg.value = res
      console.log(qrImg);
    })
  }
  let imgLoad = ()=>{
    html2canvas(divRef.value,{
      width:220,
      height:260,
    }).then(d=>{
      const base64 = d.toDataURL('image/png')
      console.log(base64);
      // down(base64)
    })
  }
  // let down = (n)=>{
  //   const zip
  // }
  return(
    <div>
      <div ref={divRef} style={{width:"200px"}} >
        <img src={qrImg} alt="" onLoad={imgLoad} />
        <p>测试</p>
      </div>
      <button onClick={generQr}>点击</button>
    </div>
  )
}
export default GenerateQR